<script setup>
import { ref } from "vue";
import { getQuestionTypeList, addReport, uploadphoto } from '@/api/report'
import myBack from '@/components/back.vue'
import { onMounted, onUnmounted } from 'vue';
// import { useRouter } from 'vue-router';


document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});


const result = ref('');
const showPicker = ref(false);

// const router = useRouter();



let addinfo = () => {
    console.log(4555555555555)
    showToast('提交成功')
    // router.push('/feedback');

}


onMounted(() => {
  console.log('组件挂载了');
});
 
onUnmounted(() => {
  console.log('组件即将销毁');
  // 当组件卸载时执行
  document.body.classList.remove('#app');
    const storage = window.localStorage
    storage.clear()
});

// const  data  = await getQuestionTypeList()


// const questionTypeListData = data.data


// const questionTypeList = ref([])

// const iterable = [1, 2, 3];
// for (let item of questionTypeListData) {
//    let dictLabel = item.dictLabel
//    let dictValue = item.dictValue
//    questionTypeList.push({text:dictLabel,value:dictValue})
// }
// console.log(questionTypeList)



const columns = [
    { text: '水污染', value: '1' },
    { text: '大气污染', value: '2' },
    { text: '土壤污染', value: '3' },
    { text: '噪声污染', value: '4' },
    { text: '其他污染', value: '5' },
];

const fileList = ref([
    { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
    // Uploader 根据文件后缀来判断是否为图片文件
    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
    { url: 'https://cloud-image', isImage: true },
]);

const onConfirm = ({ selectedOptions }) => {
    result.value = selectedOptions[0]?.text;
    showPicker.value = false;
};

</script>

<template >
    <div class="feedback-body">
        <div>
            <van-sticky>
                <myBack class="my-back"  />
            </van-sticky>
            <img class="feedback-bgimg" src="../../assets/img/feedback01.png" alt="">
        </div>


        <div class="feedback-content-0">
            <div class="feedback-content-1">

                <div class="feedback-content-title">
                    <p>&nbsp;&nbsp;&nbsp;</p>
                    <p style="color: red;">*</p>
                    <p>您反馈的问题类型</p>
                </div>
                <van-field v-model="result" is-link readonly name="picker" placeholder="请选择反映的问题类型"
                    arrow-direction="down" @click="showPicker = true" />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
                <hr>
                <div class="feedback-content-title">
                    <p>&nbsp;&nbsp;&nbsp;</p>
                    <p style="color: red;">*</p>
                    <p>您反馈问题的情况描述</p>
                </div>
                <van-cell-group inset>
                    <van-field v-model="message" rows="2" label-align="top" clearable="true" type="textarea"
                        maxlength="200" placeholder="请您填写相关问题的情况描述" show-word-limit />
                    <hr>
                </van-cell-group>
                <div class="feedback-content-title">
                    <p>&nbsp;&nbsp;&nbsp;</p>
                    <p style="color: red;">*</p>
                    <p>您反馈问题的位置信息</p>
                </div>
                <van-cell title="" label="获取定位">
                    <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                    <template #right-icon>
                        <!-- <van-icon name="location-o" /> -->
                        <img  style="width: 20px; height: 20px;" src="@/assets/img/feedback04.png" >
                        <!-- <van-icon name="@/assets/img/feedback04.png" /> -->

                    </template>
                    <hr>
                </van-cell>
                <hr>
                <div class="feedback-content-title">
                    <p>&nbsp;&nbsp;&nbsp;</p>
                    <p>现场图片或视频</p>
                    <p style="color: #c8c9cc; font-size: 12px;">(最多3张，视频15秒以内)</p>
                </div>
                <van-uploader v-model="fileList" multiple />


                <div class="feedback-content-title">
                    <p>&nbsp;&nbsp;&nbsp;</p>
                    <p style="color: red;">*</p>
                    <p>反映人信息</p>
                </div>
                <div class="user-info">
                    <p>您的姓名</p>
                    <van-field v-model="text" placeholder="请输入您的姓名" />
                    <p>您的联系方式</p>
                    <van-field v-model="text" placeholder="请输入您的手机号码" />
                    <hr>
                </div>
                <br>
                <van-button class="v-btn" type="primary" @click="addinfo">提交</van-button>
            </div>


        </div>
    </div>


</template>

<style scoped>
:root {
    --van-cell-label-font-size: 15px;
    --van-cell-vertical-padding: 0;
    --van-cell-border-color: #aaa9a9;

}

.van-cell__label {

    margin-bottom: 5px;
}

.van-field__control {
    padding: 0;
}

#app {
    width: 100%;
    padding: 0;
    text-align: start;
}

body {
    width: 100%;
}

.user-info {
    padding: 0;
}

.user-info p {
    padding-top: 0;
    padding-left: 15px;
}
/* #right-icon{
    width: 20px;
    height: 20px;
} */

/* .loction-icon{
    width: 5px;
    height: 5px;
    
} */
.v-btn {
    width: 100%;
    border-radius: 25px;
    background-color: #0166be;
}

.feedback-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #0166be;
    height: 100%;
    z-index: 1;
    /* height: 1000px; */

}

.feedback-bgimg {
    width: 100%;
    position: relative;
    z-index: 2;
    top: -18px;

}

.van-uploader__wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 15px;
}

.feedback-content-0 {
    width: 100%;
    padding: 10px;
    z-index: 2;
}

.feedback-content-1 {
    background-color: #ffffff;
    padding: 10px;
    height: 820px;
    border-radius: 15px;
    position: relative;
    top: -100px;
    z-index: 3;
}

.my-back {
    position: sticky;
    z-index: 3;
    padding-left: 10px;
    height: 0;
}

.feedback-content-title {
    display: flex;
    font-weight: 600;
    font-size: 15px;
    align-items: center;
}

hr {
    display: none;
    width: 100%;
    color: #d0d0d0;
    height: 0.01px;
    background-color: #d0d0d0;
}
</style>